﻿const {Upload, Icon, Modal, Button, message} = antd;
const {LocaleProvider, locales} = window.antd;


class UploadImages extends React.Component {
    state = this.props;

    componentWillReceiveProps(props) {
        this.setState(props);
        this.setState({
            fileList: props.picState.fileList
        })
    };

    constructor(props) {
        super(props);
        this.state.fileList = props.picState.fileList;
    }

    handleCancel = () => {
        this.setState({
            previewVisible: false
        });
    };
    handlePreview = (file) => {//modal预览
        this.setState({
            previewVisible: true,
            previewImage: file.url || file.thumbUrl
        });
    };
    handleChange = ({fileList, file}) => {
        const pic = this.state.picState;
        if (!file.status) return;//不符合规格直接退出
        if (file.status == 'error') {
            message.warning('上传失败，请检查网络!');
            return;
        }
        this.setState({//upload，done，removed都走这
            fileList: fileList
        });
        if (file.status == 'removed') {//删除
            message.success('删除成功!');
            pic.fileList = [];
            this.setState({});
            return;
        }
        if (file.status != "done") return;//上传成功赋值
        message.success('上传成功!');
        console.log(file.response);
        pic.fileList = fileList;
        this.setState({});
    };
    beforeUpload = (file, fileList) => {
        const size = file.size;//上传的文件大小
        const fileType = file.type;//可识别的文件类型（此处用于判断JPG 和 PNG）
        if (this.state.maxSize && size > this.state.maxSize * 1024) {//maxSize为kb
            message.warning(`图片大小不得超过 ${this.state.maxSize} kb !`);
            return false;
        }
        if (this.state.minSize && size <= this.state.minSize * 1024) {//minSize为kb
            message.warning(`图片大小不得少于 ${this.state.minSize} kb !`);
            return false;
        }
        if (fileType != 'image/png' && fileType != 'image/jpeg') {
            message.warning('图片格式有误');
            return false;
        }
    };

    render() {
        const uploadButton = (
            <div>
                <Icon type="plus"/>
                {
                    this.state.title ?
                        <div className="ant-upload-text" style={{fontSize: '12px'}}>{this.state.title}</div>
                        :
                        ''
                }

            </div>
        );
        return (
            <LocaleProvider locale={locales.zh_CN}>
                <div className="clearfix">

                    <Upload
                        action="upload/file"
                        listType="picture-card"
                        fileList={this.state.fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                        showUploadList={{}}
                        beforeUpload={this.beforeUpload}
                        accept="image/*"
                    >
                        {this.state.fileList.length >= (this.state.picNum ? this.state.picNum : 1) ? null : uploadButton}
                    </Upload>

                    <Modal
                        title="预览" footer={null}
                        visible={this.state.previewVisible}
                        onCancel={this.handleCancel}
                    >
                        <img alt="图片未加载" style={{width: '100%'}} src={this.state.previewImage}/>
                    </Modal>

                </div>
            </LocaleProvider>
        );
    }
}